<template>
  <div>
    <el-form :model="queryParams" ref="queryForm" size="small"
             :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="服务名" prop="serviceName">
        <el-select
          style="width:295px;"
          v-model="queryParams.serviceId"
          clearable
          filterable
          placeholder="请选择服务名"
          @keyup.enter.native="handleQuery"
        >
          <el-option
            v-for="item in serviceOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="链路ID" prop="traceId">
        <el-input v-model="queryParams.traceId" placeholder="链路ID,仅支持精确查询" clearable style="width:295px;"
                  @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="请求地址" prop="requestUri">
        <el-input v-model="queryParams.requestUri" placeholder="请求地址,支持模糊查询" clearable style="width:295px;"
                  @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="负责人" prop="chargeUserName">
        <el-input v-model="queryParams.chargeUserName" placeholder="负责人姓名,支持模糊查询" clearable style="width:295px;"
                  @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="异常标识" prop="stackHash">
        <el-input v-model="queryParams.stackHash" placeholder="异常标识,仅支持精确查询" clearable style="width:295px;"
                  @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="异常名" prop="errorName">
        <el-input v-model="queryParams.errorName" placeholder="异常名,支持模糊查询" clearable style="width:295px;"
                  @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="告警时间" prop="alarmTimes">
        <el-date-picker
          style="width:335px;"
          v-model="queryParams.alarmTimes"
          clearable
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          align="right"
          value-format="yyyy-MM-dd HH:mm:ss"
          format="yyyy-MM-dd HH:mm:ss"
          ref="alarmTimesDatePicker"
          @keyup.enter.native="handleQuery"
          @change="handleDatePicker"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <div class="top-right-btn">
        <el-row>
          <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top">
            <el-button size="mini" circle icon="el-icon-search" @click="toggleSearch()"/>
          </el-tooltip>
        </el-row>
      </div>
    </el-row>
  </div>
</template>
<script>
  import {serviceNameList} from "@/api/hawkeye/service";
  import {formatDate} from "@/utils/index";

  export default {
    name: "SearchToolbar",
    props: {
      showSearch: {
        type: Boolean,
        default: true,
      },
      queryParams: {
        type: Object,
        default: {},
      },
    },
    data() {
      return {
        serviceOptions: [],
        storeAlarmTimesKey: 'hawkEye:alarmlog:alarmDatePicker',
        pickerOptions: {
          shortcuts: [
            {
              text: '近5分钟',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 600 * 500);
                picker.$emit('pick', [start, end]);
              }
            },
            {
              text: '近10分钟',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 600 * 1000);
                picker.$emit('pick', [start, end]);
              }
            },
            {
              text: '近一小时',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 1);
                picker.$emit('pick', [start, end]);
              }
            },
            {
              text: '近一天',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '近一周',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '近一个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit('pick', [start, end]);
              }
            }]
        },
      };
    },
    created() {
      this.initDatePicker();
      this.getServiceNameList();
    },
    methods: {
      getServiceNameList() {
        serviceNameList().then(res => {
          this.serviceOptions = res.data;
        })
      },
      initDatePicker() {
        let diff = localStorage.getItem(this.storeAlarmTimesKey);
        if (diff) {
          try {
            let now = new Date()
            this.$set(this.queryParams, 'alarmTimes' , [formatDate(new Date(now.getTime() - diff)), formatDate(now)]);
          } catch (e) {
            localStorage.removeItem(this.storeAlarmTimesKey);
          }
        }
      },
      handleDatePicker(value) {
        if (value && value.length === 2) {
          let time = new Date(value[1]).getTime() - new Date(value[0]).getTime()
          localStorage.setItem(this.storeAlarmTimesKey, JSON.stringify(time));
        } else {
          localStorage.removeItem(this.storeAlarmTimesKey);
        }
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.$emit("handleQuery")
      },
      toggleSearch() {
        this.$emit("toggleSearch")
      }
    }
  }
</script>
